<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="250">
			<u-form-item label="用款人" prop="payByUser">
				<u-input v-model="form.payByUser" placeholder="请输入用款人" />
			</u-form-item>
			<u-form-item label="用款原因" prop="payByReason">
				<u-input v-model="form.payByReason" placeholder="请输入用款原因" type="textarea" />
			</u-form-item>
			<u-form-item label="用款金额" prop="payMoney">
				<u-input v-model="form.payMoney" placeholder="请输入用款金额" />
			</u-form-item>
			<u-form-item label="用款申请名称" prop="payName">
				<u-input v-model="form.payName" placeholder="请输入用款申请名称" />
			</u-form-item>
			<u-form-item label="项目机会" prop="payChance">
				<u-input v-model="form.payChance" type="select" placeholder="请选择项目机会" @click="chanceShow = true" />
			</u-form-item>
			<u-form-item label="所属合同" prop="payContract">
				<u-input v-model="form.payContract" type="select" placeholder="请设置所属合同" @click="contractShow = true" />
			</u-form-item>
			</u-form-item>
		</u-form>
		<view class="btn">
			<u-button shape="square" type="primary" @click="submit">提交</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-toast ref="uToast" />
		<u-select v-model="chanceShow" :list="chanceList" @confirm="confirmChance"></u-select>
		<u-select v-model="contractShow" :list="contractList" @confirm="confirmContract"></u-select>
	</view>
</template>

<script>
	import askPayApi from '../../api/askPay.js'
	export default {
		data() {
			return {
				form: {
					// 用款人
					payByUser: this.$store.state.userInfo.username,
					// 用款原因
					payByReason: '',
					// 用款金额
					payMoney: '',
					// 用款申请名称
					payName: '',
					// 项目机会input
					payChance: '',
					// 项目机会id
					payChanceId: '',
					// 合同input
					payContract: '',
					// 所属合同
					payContractId: '',
				},
				// 是否显示请假开始时间的日历
				startShow: false,
				// 日历的模式是范围模式
				mode: 'date',
				// 项目机会列表
				chanceList: [],
				// 项目机会列表列选择器的显示
				chanceShow: false,
				// 合同列表
				contractList: [],
				// 
				// 合同列表列选择器的显示
				contractShow: false,
				// 表单验证规则
				rules: {
					payByUser: [{
						required: true,
						message: '请输入用款人',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					payByReason: [{
						required: true,
						message: '请输入用款原因',
						trigger: ['change', 'blur']
					}],
					payMoney: [{
						required: true,
						message: '请输入用款金额',
						trigger: ['change', 'blur']
					}],
					payName: [{
						required: true,
						message: '请输入用款申请名称',
						trigger: ['change', 'blur']
					}],
					payChance: [{
						required: true,
						message: '请选择项目机会',
						trigger: ['change', 'blur']
					}],
					payContract: [{
						required: true,
						message: '请设置所属合同',
						trigger: ['change', 'blur']
					}],
				}
			};
		},
		methods: {
			// 获取项目机会列表
			getChanceList() {
				askPayApi.getBussinessChanceList().then(res => {
					res.data.result.records.forEach(item => {
						if (item.chanceName != "") {
							this.chanceList.push({
								value: item.chanceName,
								label: item.chanceName,
								id: item.id
							})
						}
					})
					console.log(res)
				})
			},
			// 获取合同列表
			getContractList() {
				askPayApi.getContractList().then(res => {
					res.data.result.records.forEach(item => {
						if (item.contractName != "") {
							this.contractList.push({
								value: item.contractName,
								label: item.contractName,
								id: item.id
							})
						}
					})
					console.log(res)
				})
			},
			// 显示消息提示框
			showToast(title, type) {
				this.$refs.uToast.show({
					title,
					type,
					position: 'top'
				})
			},
			// 确认项目机会的回调
			confirmChance(e) {
				this.chanceList.forEach(item => {
					if (item.value == e[0].value) {
						this.form.payChanceId = item.id
						this.form.payChance = item.value
					}
				})
				console.log(e)
				console.log(this.form.payChanceId)
				console.log(this.form.payChance)
			},
			// 确认合同的回调
			confirmContract(e) {
				this.contractList.forEach(item => {
					if (item.value == e[0].value) {
						this.form.payContractId = item.id
						this.form.payContract = item.value
					}
				})
				console.log(this.form.payContractId)
				console.log(this.form.payContract)
				console.log(e)
			},
			// 提交表单的回调
			submit() {
				// 验证表单
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						const {
							payByUser,
							payByReason,
							payMoney,
							payName,
							payChanceId,
							payContractId,
							time
						} = this.form
						askPayApi.askPay({
							payByUser,
							payByReason,
							payMoney,
							payName,
							payChanceId,
							payContractId,
							time,
						}).then(res => {
							console.log(res)
							this.showToast('提交成功', 'success')
							setTimeout(() => {
								this.$Router.replaceAll({
									name: 'index'
								})
							}, 1000)
						}).catch(error => {
							this.showToast('提交失败', 'error')
						})
					} else {
						console.log('验证失败');
					}
				});
			},

		},
		mounted() {
			this.getChanceList()
			this.getContractList()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.form.name = this.$store.state.userInfo.username
		}
	};
</script>

<style scoped lang="scss">
	.container {
		width: 90%;
		margin: 0 auto;

		.btn {
			margin-top: 20px;
		}
	}
</style>
